<!--  -->
<template>
  <div class="cityConfigArea">
    <div class="cityConfigArea_circleLine">
      <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-面积</span>
      <Button class="cityConfigArea_alertMessButton" type="primary"
        @click="circleLineAdd('area')">新增/编辑</Button>
      <div>
        <span v-for="(item, index) in allSelectList.area" :key="index"
          class="cityConfigArea_circleLine_span">
          {{
            item.start == 0
              ? `${item.end}㎡以下`
              : item.end >= "99999999"
              ? `${item.start}㎡以上`
              : `${item.start}-${item.end}㎡`
          }}
        </span>
      </div>
    </div>
    <div class="cityConfigArea_circleLine">
      <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-均价</span>
      <Button class="cityConfigArea_alertMessButton" type="primary"
        @click="circleLineAdd('averagePrice')">新增/编辑</Button>
      <div>
        <span v-for="(item, index) in allSelectList.averagePrice" :key="index"
          class="cityConfigArea_circleLine_span">
          {{
            item.start == 0
              ? `${item.end}元/㎡以下`
              : item.end >= "99999999"
              ? `${item.start}元/㎡以上`
              : `${item.start}-${item.end}元/㎡`
          }}
        </span>
      </div>
    </div>
    <div class="cityConfigArea_circleLine">
      <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-总价</span>
      <Button class="cityConfigArea_alertMessButton" type="primary"
        @click="circleLineAdd('totalPrice')">新增/编辑</Button>
      <div>
        <span v-for="(item, index) in allSelectList.totalPrice" :key="index"
          class="cityConfigArea_circleLine_span">
          {{
            item.start == 0
              ? `${item.end}万元以下`
              : item.end >= "99999999"
              ? `${item.start}万元以上`
              : `${item.start}-${item.end}万元`
          }}
        </span>
      </div>
    </div>
    <div class="cityConfigArea_circleLine">
      <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-更多筛选选择（C-APP）</span>
      <Button class="cityConfigArea_alertMessButton" type="primary"
        @click="moreSelect">新增/编辑</Button>
      <div>
        <span v-for="(item, index) in allSelectList.moreOthers" :key="item.id"
          @mouseover="mouseEven(allSelectList.moreOthers, index, true)"
          @mouseleave="mouseEven(allSelectList.moreOthers, index, false)"
          class="cityConfigArea_circleLine_span more-span">
          {{ item.paramValues.value }}
          <span class="more-span-deleIocn" v-if="item.hover">
            <Icon color="white" size="24" type="md-close-circle"
              @click="deleMoreSpan(index)" />
          </span>
        </span>
      </div>
    </div>
    <!--新增编辑 -->
    <Modal v-model="checkMoudle" :title="`新增${currentMess.name}`" width="600px">
      <div v-for="(item, index) in currentMess.list" :key="index">
        <div>
          <span class="circleLineModal_name">{{ currentMess.name }}：</span>
          <Input type="number" :disabled="index == 0" v-model="item.start" placeholder="请输入"
            class="circleLineModal_select"></Input>
          <span class="circleLineModal_cut">~</span>
          <Input type="number" v-if="item.end < 99999999" :disabled="item.end == 99999999"
            placeholder="请输入" v-model="item.end" class="circleLineModal_select"></Input>
          <Input type="text" v-else :disabled="item.end >= 99999999" value="以上"
            class="circleLineModal_select"></Input>
          <span class="circleLineModal_unit">{{ currentMess.unit }}</span>
          <Icon v-if="index > 0 && index < currentMess.list.length - 1" type="md-close-circle"
            size="22" color="red" @click="currentMess.list.splice(index, 1)" />
        </div>
      </div>
      <Button type="primary" @click="
          currentMess.list.splice(currentMess.list.length - 1, 0, {
            start: '',
            end: '',
          })
        ">新增</Button>
      <span v-if="checkMoudleError" class="circleLineModal_errorMess">提示：
        {{ checkMoudleErrorMess }}</span>
      <div slot="footer">
        <Button class="cityConfigArea_cancelButton" @click="checkMoudle = false">取消</Button>
        <Button type="primary" @click="addAreaSubmit()">确定</Button>
      </div>
    </Modal>
    <!-- 新增更对筛选 -->
    <Modal v-model="addMoreModal" width="500" title="更多筛选添加" :footer-hide="true">
      <div>
        <Form ref="formValidate" :model="addMoreMess" :rules="ruleValidate" :label-width="120">
          <FormItem label="标签名称" prop="tagName">
            <Select v-model="addMoreMess.tagName" placeholder="请选择" multiple
              class="cityConfigArea_moudle_select">
              <Option v-for="item in MoreSelectList" :key="item.baseTagsId"
                :value="item.baseTagsName">{{ item.baseTagsName }}</Option>
            </Select>
          </FormItem>
          <FormItem class="cityList_moudle_footer">
            <Button class="cityConfigArea_cancelButton"
              @click="addMoreModal = false">取消</Button>
            <Button type="primary" @click="addMoreSubmit('formValidate')">确定</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import generalConfiguration from '@/biz/generalConfiguration/generalConfiguration'
  export default {
    components: { draggable },
    data() {
      const ruleValidateCodeList = (rule, data, callback) => {
        console.log(65656)
        if (data.length < 1) return callback('请至少选择一个')
        callback()
      }
      return {
        allSelectList: {
          totalPrice: [],
          averagePrice: [],
          area: [],
          moreSelectList: [],
        },
        addMoreMess: {
          tagName: [],
        },
        addMoreModal: false,
        ruleValidate: {
          tagName: [{ validator: ruleValidateCodeList, trigger: 'blur' }],
        },
        selectName: ['averagePrice', 'totalPrice', 'area', 'moreOthers'],
        currentMess: {
          list: [],
        },
        checkMoudle: false,
        checkMoudleError: false,
        checkMoudleErrorMess: '',
        MoreSelectList: [],
      }
    },
    computed: {},
    watch: {},
    methods: {
      //获取列表
      getAllSelectList() {
        generalConfiguration.selectedAllList({ cityCode: this.cityCode, platform: 3 }).then(
          (res) => {
            console.log('获取筛选列表', res)
            for (const key in res) {
              res[key].map((item) => {
                item.start = item.paramValues.start
                item.end = item.paramValues.end
              })
              //排序
              res[key] = res[key].sort((a, b) => a.end - b.end)
              console.log(' res[key]', res[key])
              this.allSelectList[key] = res[key]
            }!res.moreOthers && (this.allSelectList.moreOthers = [])
            console.log(this.allSelectList)
          }
        )
      },
      //获取标签列表
      getList() {
        generalConfiguration.citytagList({
          cityCode: this.$route.query.code,
          baseTagsType: 1,
        }).then((res) => {
          console.log('获取列表', res)
          let arr = [],
            arr1 = []
          for (const key in res) {
            if (res.hasOwnProperty(key)) {
              res[key].forEach((it) => arr.push(it))
            }
          }
          this.allSelectList.moreSelectList.length > 0 ?
            arr.map((item) => {
              let index = this.allSelectList.moreSelectList.findIndex(
                (mess) => mess.value == item.baseTagsName
              )
              if (index < 0) arr1.push(item)
            }) :
            (arr1 = arr)
          this.MoreSelectList = arr1
        })
      },
      //增加编辑确定
      addAreaSubmit(name) {
        //对数据进行校验
        let alertMess = ''
        this.checkMoudleError = false
        this.checkMoudleErrorMess = ''

        let { list: arr, type } = this.currentMess
        for (var i = 0; i < arr.length; i++) {
          if (
            (i == 0 && arr[i].end > 0) ||
            (i > 0 && arr[i].start > 0 && arr[i].end - 0 > arr[i].start - 0)
          ) {
            if (i > 0 && arr[i].start - 0 < arr[i - 1].end - 0) {
              alertMess = '下一个区间段初始值要大于上一个区间段结束值'
              break
            }
            continue
          } else {
            alertMess = '请填写每个区间段数字且结束数值要大于开始的数值'
            break
          }
        }
        if (alertMess)
          (this.checkMoudleError = true) &&
          (this.checkMoudleErrorMess = alertMess)
        if (!alertMess) {
          console.log(arr)
          arr = arr.map((item) => {
            return JSON.stringify(item)
          })
          let searchType =
            this.selectName.findIndex((item) => item == type) - 0 + 1
          let params = {
            cityCode: this.cityCode,
            paramValues: arr,
            platform: 3,
            searchType,
          }
          generalConfiguration.selectedSaveOrUpdate(params).then((res) => {
            this.$Message.success('添加成功')
            this.checkMoudle = false
            this.getAllSelectList()
          })
        }
        //this.checkMoudle = false;
      },
      //点击编辑按钮
      addMoreSubmit(mess) {
        console.log(999)
        this.$refs[mess].validate((valid) => {
          if (valid) {
            console.log(this.addMoreMess.tagName)
            let paramValues = [],
              moreSelectList = this.allSelectList.moreSelectList,
              l = moreSelectList.length
            this.addMoreMess.tagName.map((item, index) =>
              paramValues.push({ id: index + l, value: item })
            )

            let paramValuesAll = paramValues.concat(moreSelectList)

            paramValuesAll = paramValuesAll.map((item) => {
              return JSON.stringify(item)
            })
            let params = {
              cityCode: this.cityCode,
              paramValues: paramValuesAll,
              platform: 3,
              searchType: 6,
            }
            generalConfiguration.selectedSaveOrUpdate(params).then((res) => {
              this.$Message.success('添加成功')
              this.addMoreModal = false
              this.$refs[mess].resetFields()
              this.getAllSelectList()
            })
          }
        })
        // console.log(mess);
        // // this.currentDate = allSelectList[mess];
        //  console.log(this.currentDate)
        //  this.currentDateDetail = true;
      },
      //编辑确定
      editAreaSubmit() {
        this.$refs[name].validate((valid) => {
          if (valid) {}
        })
      },
      //点击筛选更多
      moreSelect() {
        this.getList()
        this.addMoreModal = true
      },
      //点击新增按钮
      circleLineAdd(name) {
        let newArr = JSON.parse(JSON.stringify(this.allSelectList[name]))
        if (newArr.length == 0)
          newArr = [
            { start: 0, end: '' },
            { start: '', end: 999999999 },
          ]
        this.currentMess.list = newArr
        this.currentMess.type = name
        this.currentMess.name =
          name == 'totalPrice' ? '总价' : name == 'averagePrice' ? '单价' : '面积'
        this.currentMess.unit =
          name == 'totalPrice' ? '万元' : name == 'averagePrice' ? '元/㎡' : '㎡'
        this.checkMoudle = true
      },
      //删除某一个span标签
      deleMoreSpan(index) {
        let moreSelectList = this.allSelectList.moreOthers,
          arr = []
        moreSelectList.splice(index, 1)
        moreSelectList.map((item) => {
          item.paramValues.searchParamId = item.searchParamId
          arr.push(item.paramValues)
        })
        let params = {
          cityCode: this.cityCode,
          paramValues: arr,
          platform: 3,
          searchType: 6,
        }
        selectedSaveOrUpdate.selectedSaveOrUpdate(params).then((res) => {
          this.$Message.success('删除成功')
          this.addMoreModal = false
          this.getAllSelectList()
        })
      },
      //鼠标移入
      mouseEven(mess, index, flag) {
        let data = JSON.parse(JSON.stringify(mess))
        data[index].hover = flag
        let obj = JSON.parse(JSON.stringify(this.allSelectList))
        obj.moreOthers = data
        this.allSelectList = obj
      },
    },
    beforeCreate() {
      this.cityCode = this.$route.query.code
    },
    created() {
      this.getAllSelectList()
    },
    mounted() {},
  }
</script>
<style lang='scss' scoped>
  .cityConfigArea {
    &_circleLine {
      box-shadow: 0px 0px 6px 0px rgba(116, 119, 121, 0.2);
      padding: 8px;
      margin: 20px 0;
      background-color: #f8f8f9;

      &_span {
        border: 1px solid #ccc;
        padding: 2px 12px;
        margin-right: 8px;
        border-radius: 4px;
        margin-bottom: 9px;
        display: inline-block;
      }
    }

    &_alertMess {
      font-size: 16px;
      font-weight: 700;
      float: left;
      margin-top: 6px;

      .red {
        color: red;
      }
    }

    &_alertMessButton {
      margin: 0 8px 25px 8px;
    }

    &_moudle_select {
      width: 306px;
      margin-right: 10px;
    }

    &_moudle_inputList {
      margin-bottom: 10px;
    }

    &_moudle_icon {
      vertical-align: text-top;
    }

    .pagePublicStyle {
      text-align: right;
      padding: 14px 0;
      margin-right: 30px;
    }

    .totalCount {
      float: left;
      line-height: 34px;
      padding-left: 20px;
    }
  }

  .cityList_moudle_footer {
    ::v-deep .ivu-form-item-content {
      text-align: right;
      margin-right: 42px;
    }
  }

  .customSortStyle {
    text-align: left;

    .customSortHead,
    .customSortBody {
      li {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #eeeeee;

        div {
          flex: 1;
          text-align: center;

          button {
            margin: 0px 6px;
          }
        }

        div:first-child {
          flex: 0.4;
        }
      }
    }

    .customSortHead li {
      padding-bottom: 10px;
    }

    .customSortBody li {
      padding: 10px 0;
      line-height: 31px;
    }

    .customSortBody {
      max-height: 400px;
      overflow-y: auto;
    }

    .customSortFoot {
      padding-top: 14px;
      text-align: center;
    }
  }

  .cityConfigArea_cancelButton {
    margin-right: 6px;
  }

  .circleLineModal {
    &_select {
      width: 200px;
      margin-bottom: 10px;
    }

    &_footer {
      border-top: 1px solid #ccc;
      margin-top: 6px;
      padding-top: 8px;
    }

    &_cut {
      font-size: 22px;
      display: inline-block;
      margin-right: 8px;
    }

    &_name,
    &_unit {
      vertical-align: middle;
      height: 32px;
      display: inline-block;
    }

    &_unit {
      margin-right: 10px;
    }

    &_errorMess {
      font-size: 12px;
      color: red;
      font-weight: 700;
      margin-left: 40px;
    }
  }

  .more-span {
    position: relative;
    cursor: pointer;
    padding: 6px 10px;
    margin-right: 15px;

    &-deleIocn {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      text-align: center;
      line-height: 35px;
    }
  }
</style>